import styled from "@emotion/styled"
import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useState } from "react"
import ApiFetchers from "@/apis/api_fetchers"
import { toast } from "react-toastify"
import { useNavigate } from "react-router-dom"
import { ImageComponent } from "@/components/base/Image"
import { resolveAssetImage } from "@/utils/common"
import { useAvatarSubmit } from "@/features/business/AccountPage/useAvatarSubmit"

const FilBet1 = resolveAssetImage("pages/AccountPage/avatars/filbet_1.webp")
const FilBet2 = resolveAssetImage("pages/AccountPage/avatars/filbet_2.webp")
const FilBet3 = resolveAssetImage("pages/AccountPage/avatars/filbet_3.webp")
const FilBet4 = resolveAssetImage("pages/AccountPage/avatars/filbet_4.webp")
const AIMan1 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_men_01.webp")
const AIMan2 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_men_02.webp")
const AIMan3 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_men_03.webp")
const AIMan4 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_men_04.webp")
const AIGirl2 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_girl_02.webp")
const AIGirl3 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_girl_03.webp")
const AIGirl4 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_girl_04.webp")
const AIGirl5 = resolveAssetImage("pages/AccountPage/avatars/ai_3d_girl_05.webp")
const FootBall = resolveAssetImage("pages/AccountPage/avatars/football.webp")
const Vollerball = resolveAssetImage("pages/AccountPage/avatars/volleyball.webp")
const Soccer = resolveAssetImage("pages/AccountPage/avatars/soccer.webp")
const BaseBall = resolveAssetImage("pages/AccountPage/avatars/baseball.webp")

const PageRoot = styled.div`
    width: 100%;
    position: relative;
    flex: 1;
`

const BackgroundImage = styled(ImageComponent("pages/AccountPage/background.webp"))`
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
`

const PageBody = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
`
const AvatarTypeBox = styled.div`
    width: 100%;
    flex-direction: column;
    gap: 12rem;
    margin-top: 12rem;
`
const TypeTitle = styled.div`
    width: 100%;
    height: 24rem;
    padding: 0 20rem;
    color: #40444f;
    font-size: 16rem;
    font-family: "Gilroy";
`
const AvatarBox = styled.div`
    width: 100%;
    height: 80rem;
    display: grid;
    grid-template-columns: repeat(4, 76rem);
    gap: 10rem;
    padding: 0 20rem;
    margin-top: 8rem;
`
const Item = styled.div`
    width: 76rem;
    height: 76rem;
    padding: 6rem;
    border-radius: 100%;
    position: relative;
`
const AvatarImg = styled.img<{ isSelected?: boolean }>`
    width: 64rem;
    height: 64rem;
    border-radius: 100%;
    display: flex;
    border: ${(props) => (props.isSelected ? "2rem solid #2d6bfb" : "2rem solid transparent")};
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const SelectIcon = styled(ImageComponent("pages/AccountPage/avatars/selected.webp"))`
    width: 16rem;
    height: 16rem;
    position: absolute;
    top: 54rem;
    right: 6rem;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const SubmitButtom = styled(ButtonRegular)`
    margin-top: 124rem;
    width: 335rem;
    height: 48rem;
    box-shadow: none;
`
const avatarList = [
    {
        id: 1,
        category: "Filbet illustration",
        images: [FilBet1, FilBet2, FilBet3, FilBet4],
    },
    {
        id: 2,
        category: "AI generated beauties",
        images: [AIGirl2, AIGirl3, AIGirl4, AIGirl5],
    },
    {
        id: 3,
        category: "AI Generates Man",
        images: [AIMan1, AIMan2, AIMan3, AIMan4],
    },
    {
        id: 4,
        category: "Sports",
        images: [Soccer, Vollerball, FootBall, BaseBall],
    },
]

interface AvatarPageProps {
    defaultAvatar?: string
    onSave?: (avatarUrl: string) => void
}

export default function AvatarPage({ defaultAvatar, onSave }: AvatarPageProps) {
    const navigate = useNavigate()
    const [selectedAvatar, setSelectedAvatar] = useState(defaultAvatar || "")

    const { uploading, uploadAvatar } = useAvatarSubmit({
        onSuccess: () => {
            onSave?.(selectedAvatar)
        },
    })

    const handleSelectAvatar = (avatarUrl: string) => {
        setSelectedAvatar(avatarUrl)
    }

    const handleSave = async () => {
        if (!selectedAvatar) return
        uploadAvatar(selectedAvatar)
    }

    return (
        <PageRoot>
            <BackgroundImage />
            <PageHeader
                textColor="#131416"
                iconType="black-arrow"
                backPath="/s-account"
                backgroundColor="transparent"
                title="Avatar"
            ></PageHeader>
            <PageBody>
                {avatarList.map((category, index) => {
                    return (
                        <AvatarTypeBox key={index}>
                            <TypeTitle>{category.category}</TypeTitle>
                            <AvatarBox>
                                {category.images.map((item, index) => {
                                    return (
                                        <Item
                                            key={index}
                                            onClick={() => handleSelectAvatar(item)}
                                        >
                                            <AvatarImg
                                                isSelected={selectedAvatar === item}
                                                src={item}
                                            ></AvatarImg>
                                            {selectedAvatar === item && <SelectIcon />}
                                            {/* {index==0 && <SelectIcon src={Selected}></SelectIcon>} */}
                                        </Item>
                                    )
                                })}
                            </AvatarBox>
                        </AvatarTypeBox>
                    )
                })}
                <SubmitButtom
                    disabled={!selectedAvatar || uploading}
                    onClick={handleSave}
                >
                    {uploading ? "Uploading" : "Save"}
                </SubmitButtom>
            </PageBody>
        </PageRoot>
    )
}
